/* =========================================================
   WILLSMARG GLOBAL RESPONSIVE TYPOGRAPHY FINAL
   File: wwwroot/css/willsmarg typography css.css
========================================================= */

:root {
    --fs-h1: clamp(2.65rem, 5vw, 6.15rem);
    --fs-h2: clamp(2.1rem, 3.55vw, 4.6rem);
    --fs-h3: clamp(1.18rem, 1.35vw, 1.55rem);
    --fs-h4: clamp(1.08rem, 1.15vw, 1.35rem);
    --fs-body: clamp(.96rem, .92vw, 1.08rem);
    --fs-small: clamp(.82rem, .75vw, .94rem);
    --lh-tight: 1.02;
    --lh-heading: 1.12;
    --lh-body: 1.72;
}

/* Global typography applies to non-home pages.
   Home page keeps its own Home.css art direction. */
body:not(.wsm-home-page) h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.065em;
}

body:not(.wsm-home-page) h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: -0.055em;
}

body:not(.wsm-home-page) h3 {
    font-size: var(--fs-h3);
    line-height: 1.18;
    letter-spacing: -0.035em;
}

body:not(.wsm-home-page) p,
body:not(.wsm-home-page) li {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.card h3,
.wsm-card h3,
.wsm-proof-grid strong,
.wsm-engage-grid strong {
    font-size: clamp(1.05rem, 1.05vw, 1.32rem);
    line-height: 1.28;
}

.card p,
.wsm-card p,
.wsm-proof-grid p,
.wsm-engage-grid p {
    font-size: clamp(.92rem, .88vw, 1rem);
    line-height: 1.68;
}

p,
li,
.card p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
}

.wsm-rich-copy p,
.wsm-section-head p,
.wsm-hero-copy p {
    text-align: left;
}

@media (max-width: 767.98px) {
    h1 {
        letter-spacing: -0.045em;
        line-height: 1.03;
    }

    h2 {
        letter-spacing: -0.04em;
        line-height: 1.08;
    }

    p,
    li {
        line-height: 1.68;
    }
}